{extend name="default/base" /}

{block name="title"}111{/block}
{block name="keywords"}2222{/block}
{block name="description"}33333{/block}

{block name="css"}{/block}

{block name="content"}

        <div class="row">
            <div class="col-sm-3 col-xs-12">
                <div class="box box-solid">
                    <div class="box-header with-border">
                      <h3 class="box-title"> 控制面板</h3>
                    </div>
                    <div class="box-body no-padding">
                      <ul class="nav nav-pills nav-stacked">
                        <li><a href="{:url('index/member/message')}"><i class="fa fa-envelope-o text-light-blue"></i> 我的消息</a></li>
                        <li><a href="{:url('index/member/article')}"><i class="fa fa-edit text-light-blue"></i> 我的文章</a></li>
                        <li><a href="{:url('index/member/comment')}"><i class="fa fa-comments text-light-blue"></i> 我的评论</a></li>
                        <li><a href="{:url('index/member/favorite')}"><i class="fa fa-star text-light-blue"></i> 我的收藏</a></li>
                        <li class="active"><a href="{:url('index/member/setting')}"><i class="fa fa-gear text-light-blue"></i> 个人设置</a></li>
                      </ul>
                    </div>
                </div>
            </div>

            <div class="col-sm-9 col-xs-12">
                <div class="box box-solid">
                    <div class="box-header with-border">
                      <h3 class="box-title">个人设置</h3>
                    </div>
                         <form method="post" id="form" action="" class="form-horizontal">
                         <!-- Custom Tabs -->
                          <div class="nav-tabs-custom">
                            <ul class="nav nav-tabs">
                              <li class="active"><a href="#tab_1" data-toggle="tab">个人资料</a></li>
                              <li><a href="#tab_2" data-toggle="tab">头像设置</a></li>
                              <li><a href="#tab_3" data-toggle="tab">密码修改</a></li>
                            </ul>
                            <div class="tab-content">
                              <div class="tab-pane active" id="tab_1">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">电子邮箱</label>
                                        <div class="col-sm-5">
                                            <input type="text" name="email" value="{$data.email}" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">电话号码</label>
                                        <div class="col-sm-5">
                                            <input type="text" name="phone" value="{$data.phone}" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">性别</label>
                                        <div class="col-sm-5">
                                            <label class="radio-inline">
                                                <input {eq name="data.sex" value="1"}checked{/eq} type="radio" value="1" name="sex">
                                                男
                                            </label>
                                            <label class="radio-inline">
                                                <input {eq name="data.sex" value="2"}checked{/eq} type="radio" value="2" name="sex">
                                                女
                                            </label>
                                            <label class="radio-inline">
                                                <input {eq name="data.sex" value="0"}checked{/eq} type="radio" value="0" name="sex">
                                                未知
                                            </label>
                                        </div>
                                    </div>
                              </div>
                              <!-- /.tab-pane -->
                              <div class="tab-pane" id="tab_2">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">上传头像</label>
                                    <div class="col-sm-10">
                                        <div class="box box-solid">
                                            <div class="box-body">
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="imageBox">
                                                            <div class="thumbBox"></div>
                                                            <div class="spinner" style="display: none">Loading...</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="cropped">

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-footer">
                                                <div class="action">
                                                    <input type="file" id="file" class="btn btn-xs" style="float:left; width: 180px">
                                                    <div class="btn-group">
                                                        <button type="button" id="btnZoomIn" value="放大" class="btn btn-xs btn-default btn-flat">放大</button>
                                                        <button type="button" id="btnZoomOut" value="缩小" class="btn btn-xs btn-default btn-flat">缩小</button>
                                                        <button type="button" id="btnCrop" value="裁剪" class="btn btn-xs btn-primary btn-flat">裁剪</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              </div>
                              <!-- /.tab-pane -->
                              <div class="tab-pane" id="tab_3">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">原密码</label>
                                        <div class="col-sm-5">
                                            <input type="password" id="password" name="old_password" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">新密码</label>
                                        <div class="col-sm-5">
                                            <input type="password" id="password" name="password" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">确认密码</label>
                                        <div class="col-sm-5">
                                            <input type="password" name="confirm_password" class="form-control">
                                        </div>
                                    </div>
                              </div>
                              <!-- /.tab-pane -->
                            </div>
                            <!-- /.tab-content -->
                            <div class="box-footer" style="padding-top:15px;">
                                  <div class="col-sm-offset-2 col-sm-10 col-xs-offset-2">
                                    <div class="btn-group">
                                        <input type="hidden" value="{$data.uid}" name="uid">
                                        <button class="btn btn-default btn-flat" type="reset">取消</button>
                                        <button class="btn btn-primary btn-flat" id="submit" type="button">保存</button>
                                    </div>
                                  </div>
                            </div>
                          </div>
                          <!-- nav-tabs-custom -->
                        </form>
                </div>
            </div>
        </div>
{/block}

{block name="js"}
<link rel="stylesheet" type="text/css" href="__STATIC__/static/cropbox/style.css">
<script type="text/javascript" src="__STATIC__/static/cropbox/cropbox.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: '/static/img/avatar.png'
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            <!-- this.files = []; -->
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('.cropped').empty();
            $('.cropped').append('<img src="'+img+'">');
            $('.cropped').append('<input name="avatar" type="hidden" value="'+img+'" >');
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
</script>

<script type="text/javascript">
$(document).ready(function(){
  $("#submit").click(function(){
                $.ajax({
                    url:"{:url('api/user/modify')}",
                    data:$(form).serialize(),
                    type:'post',
                    dataType:'json',
                    success:function(xhr){
                        if(xhr.code == 200){
                            swal({
                                title: xhr.msg,
                                text: "",
                                type: "success",
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                            });
                        } else{
                            swal({
                                title: xhr.msg,
                                text: "",
                                type: "error",
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                            });
                        }
                    }
                });
  });
});
</script>
{/block}